<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { fixContentImageUrls, fixCoverImageUrl } from '@/utils/fixImageUrls'
import { getMapScenicSpotDetail } from '@/api/play'

onLoad(({ id }) => {
  onGetScenicSpotDetail(id)
})
const scenicSpotDetail = ref({
  id: '',
  cover: '',
  title: '',
})
async function onGetScenicSpotDetail(id) {
  const { result } = await getMapScenicSpotDetail(id)
  scenicSpotDetail.value = {
    ...result,
    cover: fixCoverImageUrl(result.cover),
    content: fixContentImageUrls(result.content),
  }
}
</script>

<template>
  <view class="bg-[#F5F5F5] pb-safe min-h-safe">
    <nut-navbar :title="scenicSpotDetail.title" custom-color="#000" left-show placeholder fixed />
    <main class="pt-1.5">
      <view class="px-2 m-2 bg-white rounded">
        <image class="py-2 block h-368 w-full" :src="scenicSpotDetail.cover" mode="aspectFill" />
      </view>
      <view class="px-2 m-2 bg-white rounded">
        <view class="py-3">
          <rich-text :nodes="scenicSpotDetail.content" selectable />
        </view>
      </view>
    </main>
  </view>
</template>
